<template>
  <div class="van">
        <van-nav-bar
            :title="username"
            right-text="切换城市"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
            />
  
            <van-search @input='inputFn'  @focus='focusFn'  @blur='blurFn' v-model="content"  placeholder="输入,学校,商务楼,地址" clearable />
           
            <div class="search">
            <div class="seach">
            <div class="hint"  :class="{hide:hides?false:true}" >
             <div v-for="(arr,index) in userget"  :key="index"> <p @click="curFn(arr.name)" ref="color" >{{arr.name}}</p></div>
            </div>
            <van-button @click="addFn" type="info" size="large">提交</van-button>
           </div>
            </div>
          
            <div :class="{hide:showli?false:true}" class="history">历史记录</div>
            <div @click="historyFn(item.name,item.address)" class="content-list" v-for="(item,index) in list" :key="index">
                   <div class="content" >
                    <p>{{item.name}}</p>
                    <p class="little">{{item.address}}</p>
                   </div>
            </div>
                 <div :class="{hide:showli?false:true}"  @click="deleteFn"  class="empty">
               <p>清空所有</p>
                </div>
  </div>
</template>

<script>
import {serach,CityList} from '../api/index'

export default {
  data(){
      return{
          userid:'',
          userget:[],
          listadd:[],
          address:'',
          hides:false,
          arrlist:'',
          showli:true,    //控制清除按钮
          list:[],         //渲染搜索内容
          content:'',      //绑定输入框
          show:true,
          username:'',
          keyword:'',
          city_id:1,
          id:localStorage.getItem('userid'),

      }
  },
  created () {
       this.list=JSON.parse(localStorage.getItem('listadd'))
        // console.log('59',this.list);
      CityList(this.id).then(res=>{
         this.username= res.data.name
         this.userid = res.data.id
         
      })
    // this.userget = localStorage.getItem('usetget')
    // console.log('67',this.userget);
  },
  methods: {
      inputFn(){
         if(this.content==''){
             this.howli = true
           this.hides=true
          this.list=JSON.parse(localStorage.getItem('listadd'))
        }else{
            
             
        }
      },
      //点击将小框历史记录传到serach
      curFn(item){
         this.content=item
          this.hides=false
      },
      //输入框失去焦点时触发
      blurFn(){
         setTimeout(function(){
              this.hides=false
            //   console.log(888);
         },2000)
           
      },
      //输入框获取焦点时触发
      focusFn(){
          this.hides=true
         
        //   console.log(102,this.userget);
      },
      //清空历史
      deleteFn(){
          this.userget=''
          this.list=''
          this.showli = false
          localStorage.removeItem('listadd')
          localStorage.removeItem('userget')
      },
      //点击存入历史
      historyFn(item,list){
        //   console.log('111',item);
          this.content = item
         this.listadd.push({name:item,address:list})
         localStorage.setItem('listadd',JSON.stringify(this.listadd))
         console.log('113',this.listadd);
         let userid = list

         //点击搜索到的内容跳转到主页
        this.$router.push({
            path:'/index',
            query:{
              userid
            },
        })
      },
      //addFn 添加搜索内容
    addFn(){
        if(!this.content){
            this.$toast.fail('请输入内容')
            return
        }
      this.userget.push({name:this.content})
      console.log('108',this.userget);
      console.log('110',this.userget);
      localStorage.setItem('userget',JSON.stringify(this.userget))
      this.userget.push(localStorage.getItem('userget'))
      this.showli=false
      this.show=false
         serach({city_id:this.id,keyword:this.content}).then(res=>{
            // console.log('56',res);
            this.list = res.data
        //    console.log(this.listadd);
      })
      this.hides=false
    },
    onClickLeft(){
    this.$router.push('/hom')
    },
    onClickRight(){
    this.$router.push('/hom')
    }
}
}

</script>

<style lang="less" scoped>

.hide{
    display: none;
}
.hint{
    position: absolute;
   
    top: 189px;
    z-index: 1;
    width: 150px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px  2px #e4e4e4;
    p{
        padding-left: 10px;
        margin-top: 10px;
        display: block;
        width: 95%;
        line-height: 30px;
    }
    p:hover{
        background-color: #e8e8e9;
    }
}
.empty{
    width: 100%;
    height: 80px;
    text-align: center;
    background-color: #fff;
    border-top: solid 1px #e4e4e4;
    p{
        font-size: 30px;
        line-height: 100px;
        color: #666666;
    }
}
.historyadd{
    width: 100%;
    height: 120px;
   
    background-color: #fff;
    border-bottom: 1px solid #e4e4e4;
    overflow: hidden;
    p{
        font-size: 30px;
        margin-top: 20px;
        margin-left: 50px;
    }
}
.content-list{
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #e4e4e4;
    overflow: hidden;
    .content{
        p{
            font-size:30px ;
            margin-top: 30px;
            margin-left: 50px;
            color: #333333;
        }
        .little{
            font-size: 20px;
            color: #999999;
        }
    }
}
.style{
    display: none;
}
/deep/.van-button{
    height: 60px;
    margin-top: 10px;
    font-size: 25px;
}
.search{
    background-color: #fff;
    height: 80px;
}
.van{
    background-color: #f5f5f5;
}

/deep/.van-icon-arrow-left{
    color: #fff;
    margin-top: 50px;
    font-size: 30px;
}
/deep/ .van-icon-search{
     display: none;
}
/deep/.van-nav-bar{
    margin-bottom: 10px;
    height: 90px;
    background-color: #3190e8;
   .van-nav-bar__text{
         color: #fff;
    }
    .van-nav-bar__title{
        color: #fff;
        font-size: 35px;
        height: 60px;
        margin-top: 40px;
        line-height: 60px;
        font-weight: 700;
    }
    .van-nav-bar__text{
        font-size: 35px;
           color: #fff;
        margin-top: 40px;
    } 
}
 /deep/.van-search{
     background-color: #fff;
     width: 100%;
     padding: 0 20;
     margin-top: 20px;
     padding: 15px 21px;
 }
 /deep/.van-search__content{
     background-color: #fff;
     border: 1px solid #e4e4e4;
 }
 /deep/.van-field__control{
     height: 50px;
     font-size: 35px;
 }
.seach{
    padding: 0 20px;
}
.history{
    width: 100%;
    height: 45px;
    background-color: #f5f5f5;
    margin-top: 15px;
    line-height: 15px;
    padding: 0 15px;
    line-height:45px ;
    border: 1px solid #e4e4e4;
}
</style>